<template>
	<view class="drugOrderList-wrap">
		<view class="drugOrderList-tab">
			<u-tabs v-model="activeTab" :scroll="false" :tabs="['全部', '待付款', '待发货', '待收货', '已完成', '售后']"
				@change="tabChange"></u-tabs>
		</view>

		<scroll-view show-scrollbar="false" class="drugOrderList-list" scroll-y @scrolltolower="scrollLoading()">
			<view class="scroll-flex-wrap">
				<view
					@click="gotoRouter('/pages-order/orderDetail/orderDetail?code=' + store.orderCode + (status == 'after_sale' ? ('&medicineId=' + store.commodityList[0].id) : ''))"
					v-for="(store, index) in dataList" :key="index" class="store-wrap">
					<view class="store-title">
						<image
							src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_store_location.png">
						</image>
						<view class="store-title-text">{{ store.merchantName }}</view>
						<view v-if="status != 'after_sale'" :class="statusClasses[store.status]">{{ store.statusName }}
						</view>
						<view v-if="status == 'after_sale'">{{ store.createdTime }}</view>
					</view>
					<view v-for="(medicine, index) in store.commodityList" :key="index" class="valid-medicine">
						<view class="medicine-pic-wrap">
							<image :src="medicine.thumbnailUrl" class="medicine-pic"></image>
							<view v-if="medicine.recipeFlag > 0" class="prescription-tag">处方药</view>
						</view>
						<view class="info-wrap">
							<view class="medicine-name nowrap">{{ medicine.name }}</view>
							<view class="medicine-pack">规格：{{ medicine.specification }}</view>
						</view>
						<view class="price-count-wrap">
							<view class="medicine-price">￥{{ medicine.salesPrice }}</view>
							<view class="medicine-count">×{{ medicine.count }}</view>
						</view>
					</view>
					<view class="store-form-line">
						<view class="store-form-title">配送方式</view>
						<view class="store-form-content" style="flex: 1;">{{ store.receivingWayStr }}</view>
					</view>
					<view class="store-form-line">
						<view class="store-form-title">订单号</view>
						<view class="store-form-content" style="flex: 1;">{{ store.orderCode }}</view>
					</view>
					<view class="store-price-line">
						<view class="store-medicine-count">共{{ store.commodityCount }}件</view>
						<view class="store-price-title">合计：</view>
						<view class="store-price-show">￥{{ store.orderAmount }}</view>
						<view class="store-medicine-count">(运费{{ store.freightAmount }})</view>
					</view>
					<view v-if="store.status < 500 && status != 'after_sale'" class="order-funcs-wrap">
						<!--100---待支付
							200---待发货
							300---待收货
							500---已完成
							900---已取消  -->
						<view v-if="store.status == 100" class="normal-btn" @click.stop="cancelOrder(store.orderCode)">
							取消订单</view>
						<view v-if="store.status == 100" class="confirm-btn" @click.stop="toPayOrder(store.orderCode)">
							去支付</view>
						<view
							v-if="store.status == 200 && (!store.refundStatusExplain || store.refundStatusExplain == '')"
							class="normal-btn" @click.stop="cancelOrder(store.orderCode)">申请退单</view>
						<view
							v-if="store.status == 200 && (store.refundStatusExplain && store.refundStatusExplain != '')"
							class="status-text">{{ store.refundStatusExplain }}</view>
						<!-- <view v-if="(store.status == 300 || store.status == 500) && store.afterSaleFlag == 0" class="normal-btn">申请售后</view> -->
						<view v-if="(store.status == 300 || store.status == 500) && store.afterSaleFlag > 0"
							class="normal-btn">售后详情</view>
						<view v-if="store.status == 300" class="confirm-btn"
							@click.stop="confirmOrder(store.orderCode)">确认收货</view>
						<view
							v-if="store.status == 200 && store.receivingWay == 2 && (!store.refundStatusExplain || store.refundStatusExplain == '')"
							class="confirm-btn" @click.stop="showOrHideQRCode(store.orderCode)">核销码</view>
					</view>
					<view v-if="status == 'after_sale'" class="order-funcs-wrap">
						<view class="status-text">{{ store.afterSaleStatusName }}</view>
					</view>
				</view>
			</view>

			<!-- <view
				class="drugOrderList-item"
				v-for="(item, index) in dataList"
				:data="item"
				:key="index"
				@click="gotoRouter('/pages-order/drugOrderInfo/drugOrderInfo?id=' + item.id)"
			>
				<view class="drugOrderList-item-no">
					<view class="info2">订单号：{{ item.outTradeNo }}</view>
					<view class="word4 word-red" v-if="item.status < 6">{{ orderStatusList[item.status] }}</view>
					<view class="word4 word-gray" v-if="item.status == 6">{{ orderStatusList[item.status] }}</view>
					<view class="word4 word-purple" v-if="item.status == 7 || item.status == 8">{{ orderStatusList[item.status] }}</view>
					<view class="word4 word-green" v-if="item.status > 8">{{ orderStatusList[item.status] }}</view>
				</view>

				<view class="drugOrderList-item-drug"><u-show-goods v-for="(goods, index2) in item.commodityDetailList" :data="goods" :key="index2" type="0"></u-show-goods></view>

				<view class="drugOrderList-item-price">
					<view class="word12">共1件商品，实付款：</view>
					<view class="word13">{{ item.orderAmount }}</view>
					<view class="word14">元</view>
				</view>

				<view class="drugOrderList-item-btn">
					<view class="drugOrderList-item-btn-left" v-if="item.status == 3" @click.stop="clearOrder(item.id)">取消订单</view>
					<view class="drugOrderList-item-btn-right" v-if="item.status == 3" @click.stop="submitOrder(item.id)">去支付</view>
					<view class="drugOrderList-item-btn-right" v-if="item.status == 8" @click.stop="confirmOrder(item.id)">确认收货</view>
				</view>
			</view> -->

			<u-empty-state v-if="dataTotalPage == 0" value="暂无相关药品订单"></u-empty-state>
			<uni-load-more v-if="dataTotalPage > 1" :status="dataLoading"></uni-load-more>
		</scroll-view>
		<view v-if="qrcodeShow" class="qrcode-root">
			<view class="qrcode-dialog">
				<image class="close-btn"
					src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_float_close.png"
					@click="showOrHideQRCode()"></image>
				<view class="qrcode-wrap">
					<u-qrcode ref="shareQR" canvas-id="shareQR" :value="qrcodeContent" size="200"
						:options="{ useDynamicSize: false }"></u-qrcode>
				</view>
				<view class="confirm-btn" @click="saveQRCode('shareQR')">保存至相册</view>
			</view>
		</view>
	</view>
</template>

<script>
import uTab from '@/components/u-tabs/u-tabs.vue';
import uShowGoods from '@/components/u-show-goods/u-show-goods.vue';
import uniLoadMore from '@/components/uni/uni-load-more/uni-load-more.vue';
import uEmptyState from '@/components/u-empty-state/u-empty-state.vue';
export default {
	components: {
		uTab,
		uShowGoods,
		uniLoadMore,
		uEmptyState
	},
	data() {
		return {
			statusClasses: {
				100: 'store-status-wait-text',
				200: 'store-status-wait-text',
				300: 'store-status-wait-text',
				500: 'store-status-finished-text',
				900: 'store-status-failed-text'
			},
			activeTab: 0,
			pageNo: 1,
			pageSize: 20,
			dataTotal: 0, //数据总数
			dataTotalPage: 1, //数据总分页
			dataLoading: 'loading', //数据加载
			dataList: [],
			status: null,
			payFlag: true,
			qrcodeContent: '',
			qrcodeShow: false
		};
	},
	onLoad(option) { },
	onShow() {
		this.initData();
	},
	methods: {
		tabChange(e) {
			this.activeTab = e;
			switch (this.activeTab) {
				case 0:
					this.status = null;
					break;
				case 1:
					this.status = "wait_pay";
					break;
				case 2:
					this.status = "wait_sendout";
					break;
				case 3:
					this.status = "wait_receiving";
					break;
				case 4:
					this.status = "finished";
					break;
				case 5:
					this.status = "after_sale";
					break;
			}
			this.initData();
		},

		getStatusStyle(status) {
			return { color: '#FF9660' };
		},

		initData() {
			this.pageNo = 1;
			this.dataList = [];
			this.dataTotalPage = 1;
			this.dataTotal = 0;
			this.scrollLoading();
		},

		//药品订单列表
		queryDrugOrderList() {
			let params = {
				pageNo: this.pageNo,
				pageSize: this.pageSize
			};
			if (this.status) {
				params.listType = this.status;
			}
			this.$api
				.queryDrugOrderList({
					params: params
				})
				.then(res => {
					if (res.code == 200) {
						this.dataTotalPage = res.result.pages;
						this.dataTotal = res.result.total;
						if (this.pageNo == 1) {
							this.dataList = res.result.records;
						} else {
							this.dataList = this.dataList.concat(res.result.records);
						}

						if (res.result.current >= res.result.pages) {
							this.dataLoading = 'noMore';
						} else {
							this.dataLoading = 'loading';
						}
						this.pageNo++;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//修改订单状态
		updateOrderStatus(id, status) {
			this.$api
				.updateOrderStatus({
					params: {
						orderId: id,
						status: status
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.initData();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		toPayOrder(orderCode) {
			this.gotoRouter('/pages-mall/orderCreate/orderCreate?orderCode=' + orderCode);
		},

		// 确认收货
		confirmOrder(orderCode) {
			uni.showModal({
				title: `确定要确认收货吗？`,
				success: res => {
					if (res.confirm) {
						this.$api.confirmMedicineOrder({
							data: {
								code: orderCode
							}
						}).then(res => {
							if (res.code == 200) {
								uni.showToast({
									icon: "success",
									title: '订单确认成功'
								});
								this.initData();
							} else {
								uni.showToast({
									icon: "none",
									title: res.message
								})
							}
						})
					}
				}
			});
		},

		// 申请退单
		cancelOrder(orderCode) {
			uni.showModal({
				title: `确定要取消订单吗？`,
				success: res => {
					if (res.confirm) {
						this.$api.cancelMedicineOrder({
							data: {
								code: orderCode
							}
						}).then(res => {
							if (res.code == 200) {
								uni.showToast({
									icon: "success",
									title: '退单申请成功'
								});
								this.initData();
							} else {
								uni.showToast({
									icon: "none",
									title: res.message
								})
							}
						})
					}
				}
			});
		},

		//滚动加载
		scrollLoading() {
			if (this.pageNo <= this.dataTotalPage) {
				this.queryDrugOrderList();
			}
		},

		showOrHideQRCode(orderCode) {
			this.qrcodeShow = !this.qrcodeShow;
			this.qrcodeContent = 'https://disugroup.com/qrcode?scene=' + 'order_verify&id=' + orderCode;
		},

		saveQRCode(refName) {
			uni.showLoading({
				title: '保存中',
				mask: true
			});
			const ref = this.$refs[refName];
			/* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
			if (Array.isArray(ref)) {
				ref[0].save({
					success: res => {
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						});
					},
					fail: err => {
						uni.showToast({
							icon: 'none',
							title: JSON.stringify(err)
						});
					}
				});
			} else {
				ref.save({
					success: res => {
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						});
					},
					fail: err => {
						uni.showToast({
							icon: 'none',
							title: JSON.stringify(err)
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="less">
@import './drugOrderList.less';
</style>
